<template>
  <div class="grouptours" v-if="datas">
    <div class="head">
      <!-- 轮播图 -->
      <div class="carousel_chart">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item>
            <div
              class="img"
              :style="{
                background:
                  'url(' + datas.deadImg + ') no-repeat center / cover',
              }"
            ></div>
          </van-swipe-item>
        </van-swipe>
        <span
      @click="back"
        class="iconfont icon-fanhui"
      ></span>
      </div>

      <!-- 搜索 -->
      <div class="sarech">
        <router-link :to="'searchlist?id='+1" tag="div" class="input">
          <div class="img">
            <img :src="datas.marherImg" alt="" />
          </div>
          <div class="place">
            {{ datas.place }}
          </div>
          <div class="search">搜索</div>
        </router-link>
      </div>
    </div>
    <div class="tabs">
      <div :class="['tab',editId==1?'selected':'']" @click="editId=1">国内短线</div>

      <div :class="['tab',editId==2?'selected':'']" @click="editId=2">国内长线</div>
    </div>
    <!-- 底部列表 -->
      <group-conponents :datas="datas" :edit-id="editId"></group-conponents>
  </div>
</template>

<script>

import { getGroupTours } from "../api/home";
import groupConponents from '../components/groupConponents.vue';
export default {
  components: { groupConponents },
  data() {
    return {
      datas: null,
      editId:1,
    };
  },
  methods: {
   
    getGroupToursFun() {
      getGroupTours().then((data) => {
        // console.log(data);
        this.datas = data.data[0];
        // console.log(this.datas);
      });
    },
    back(){
      this.$router.back()
    }
  },
  created() {
    this.getGroupToursFun();
    
  },
};
</script>

<style lang="scss" scoped>
.grouptours {
  background-color: #f7f4f8;
  .tabs {
    padding: 21px 15px 0 15px;
    margin-top: 10px;
    background-color: #fff;
    color: #000;
    display: flex;
    align-items: center;
    font-size: 12px;
    .tab {
        position: relative;
      padding: 0 10px;
      &::after {
        content: "/";
        font-size: 18px;
        color: #ccc;
        margin-left: 10px;
        line-height: 18px;
      }
    }
    .selected {
      font-size: 16px;
      &::before {
        content: "";
        position: absolute;
        bottom: 0;
        height: 6px;
        left: 5px;
        width: calc(100% - 24px);
        background: linear-gradient(to right, #fb7dae, #f76168);
        opacity: 0.8;
      }
    }
  }
  .head {
    .sarech {
      padding: 20px 15px;
      background-color: #fff;
      .input {
        height: 40px;
        border-radius: 25px;
        background-color: #f5f5f5;
        display: flex;
        align-items: center;
        .search {
          font-size: 14px;
          color: #757575;
          margin-left: 14px;
          height: 40px;
          line-height: 40px;
        }
        .place {
          font-size: 14px;
          color: #80d7d1;
          margin-left: 7px;
          padding-right: 14px;
          border-right: 1px solid #e0e0e0;
          height: 40px;
          line-height: 40px;
        }
        .img {
          margin-left: 15.5px;
          width: 12px;
          height: 15px;
          img {
            width: 100%;
            display: block;
          }
        }
      }
    }
    .carousel_chart {
      position: relative;
      span {
      position: absolute;
      top: 10px;
      left: 10px;
      height: 55px;
      color: #fff;
      font-size: 24px;
    }
      .my-swipe {
        .img {
          width: 100%;
          height: 139px;
        }
      }
    }
  }
}
</style>